<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: undefined
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val && val.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      var that = this
      var arr = this.chartData.map(v => { return [v.date, v.amount === null || v.amount < 0 ? 0 : v.amount, v.dealName, v.dealId, v.companyId] })
      this.chart.setOption({
        dataset: [
          {
            dimensions: [],
            source: arr
          }
        ],
        tooltip: {
          trigger: 'item',
          confine: true,
          formatter: function(params) {
            return window.i18n.t('项目名称') + ': ' + params.data[2] + '<br>' +
                   window.i18n.t('实际划款时间') + ': ' + params.data[0] + '<br>' +
                   window.i18n.t('投资金额') + window.i18n.t('金额单位') + ': ' + moneyFormat(params.data[1], 'w')
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: this.chartData.length > 15 ? 70 : 20,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.06)'
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              fontSize: 12,
              align: 'left',
              padding: [0, 0, 0, -10],
              color: 'rgba(0,0,0,.54)'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#F2F3F3'],
                width: 1,
                type: 'dashed',
                opacity: 1
              }
            },
            splitArea: { show: false },
            axisLabel: {
              interval: 0,
              textStyle: {
                fontSize: 13,
                color: 'rgba(0,0,0,.54)'
              },
              formatter: function(value) {
                return moneyFormat(value, 'w')
              }
            }
          }
        ],
        color: ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
        dataZoom: [
          {
            type: 'slider',
            height: 20,
            bottom: 20,
            startValue: 0,
            endValue: this.chartData.length > 15 ? this.chartData.length / 30 : 100,
            show: this.chartData.length > 15 || false
          },
          {
            type: 'inside',
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
            show: this.chartData.length > 15 || false
          }
        ],
        series: [
          {
              name: 'scatter',
              type: 'scatter',
              datasetIndex: 0,
              symbolSize: 20
          }
        ]
      })
      that.chart.on('click', function(event) {
				if (event.data) {
					that.$emit('clickHandel', event.data, event)
				}
			})
    }
  }
}
</script>
